<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
    <title>{{report_title}} at {{report_date}}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<style>
    body {
        font-family: inherit;
    }

    .section {
        margin-top: 30px;
    }

    .section-title {
        background-color: rgba(47, 29, 29, 0.76);
        color: white;
        padding: 8px 10px;
        /*cursor: pointer;*/
        border-radius: 4px;
    }

    .section-title h3 {
        margin-bottom: 0;
    }

    .section-content {
        margin-top: 20px;
        padding-left: 10px;
    }

    .sub-section {
        margin: 20px 0;
    }

    .sub-section-title {
        margin-top: 16px;
        font-size: 1.25em;
    }

    .nav-side {
        /*width: 360px;*/
        background-color: RGBA(33,37,41,var(--bs-bg-opacity,1))!important;
        height: 100vh;
    }


    #offcanvasNavbar {
        background-color: RGBA(33,37,41,var(--bs-bg-opacity,1))!important;
    }

    .title {
        padding: 30px 0;
        color: white;
    }

    .content-side {
        padding: 10px 20px;
        /*overflow-y: scroll;*/
        /*height: 100vh;*/
    }

    #container {
        /*height: 100vh;*/
    }

    .nav-item {
        color: white;
    }

    .btn-toggle-nav {
        /*background-color: white;*/
    }

    .btn-toggle-nav a {
        padding: .1875rem .5rem;
        margin-top: .125rem;
        margin-left: 1.25rem;
    }

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        background-color: rgba(76, 88, 86, 0.42);
    }
</style>
<body>
<div id='container' class="container-fluid">
    <div class="row">
        <!- 手机等小屏幕适配->
        <div class="col-12 d-block d-md-none">
            <nav class=" navbar bg-primary  fixed-top" data-bs-theme="dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">{{report_title}}</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title text-white" id="offcanvasNavbarLabel">{{report_title}}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <ul id="navbar-sm" class="nav nav-pills flex-column">
                                <li class="nav-item">
                                    <a class="nav-link active text-white" aria-current="page" href="#summary">Summary</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-white" href="#adjusting-result">Adjusting result</a>
                                </li>
                                <li class="nav-item mb-1">
                                    <a href="#error-adjustment" class="nav-link text-white" data-bs-toggle="collapse" data-bs-target="#sm-collapse" aria-expanded="true">
                                        Error adjustment
                                    </a>
                                    <div class="collapse" id="sm-collapse">
                                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                                            {% for item in errors %}
                                            <li><a href="#{{item.name}}" class="nav-link  text-white">{{item.name}}</a></li>
                                            {% endfor%}
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  text-white" href="#additional-info">Additional information</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

        </div>

        <div class="col-2 col-md-3 col-xxl-2 nav-side d-none d-md-block"></div>

        <div class="col-2 col-md-3 col-xxl-2 nav-side d-none d-md-block" style="position: fixed;">

            <div class="title"><h2>{{report_title}}</h2></div>
            <ul id="navbar" class="nav nav-pills flex-column">
                <li class="nav-item">
                    <a class="nav-link active text-white" aria-current="page" href="#summary">Summary</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  text-white" href="#adjusting-result">Adjusting result</a>
                </li>
                <li class="nav-item mb-1">
                    <a href="#error-adjustment" class="nav-link text-white" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="true">
                        Error adjustment
                    </a>
                    <div class="collapse" id="orders-collapse">
                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                            {% for item in errors %}
                            <li><a href="#{{item.name}}" class="nav-link  text-white">{{item.name}}</a></li>
                            {% endfor%}
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link  text-white" href="#additional-info">Additional information</a>
                </li>
            </ul>
        </div>
        <div class="col content-side" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="10px 10px -40%" data-bs-smooth-scroll="true">
            <div class="d-block d-md-none" style="height: 30px"></div>
            <div>Report created at: {{report_date}}</div>
            <div id="summary" class="accordion-item section summary">
                <div class="section-title text-primary-emphasis bg-primary-subtle rounded-1">
                    <h3>Summary</h3>
                </div>
                <div id="collapse-summary">
                    <div class="section-content">
                        <table id='summary_' class="table ">
                            {% for row in summaries %}
                            <tr>
                                {% for col in row %}
                                <td>{{col}}</td>
                                {% endfor%}
                            </tr>
                            {% endfor%}
                        </table>
                    </div>
                </div>
            </div>


            <div class='section adjusting-result' id='adjusting-result'>
                <div style="height: 20px"></div>
                <div class="section-title text-primary-emphasis bg-primary-subtle rounded-1">
                    <h3>Adjusting result</h3>
                </div>
                <div class="section-content">
                    <table class="table ">
                        <tr>
                            <td class="text-center">Before adjustment</td>
                            <td class="text-center">After adjustment</td>
                        </tr>
                        <tr>
                            {% for image in adjust %}
                            <td>
                                <img src='{{image}}' style="width: 100%"/>
                            </td>
                            {% endfor%}
                        </tr>
                    </table>
                </div>

            </div>

            <div id="error-adjustment" class="section error-adjustment">
                <div style="height: 20px"></div>
                <div class="section-title text-primary-emphasis bg-primary-subtle  rounded-1">
                    <h3>Error adjustment</h3>
                </div>

                <div class='section-content'>
                    <h4>Only the first 5 results of each error are displayed, and all error detection results can be found under the "AutoHiC/autohic_results/" path.</h4>
                    {% for item in errors %}

                    <div id="{{item.name}}">
                        <div style="height: 20px"></div>
                        <div class="sub-section-title">{{item.name}}</div>
                        <div>
                            <div class="tab-content" id="myTabContent">
                                {% for pair in item.pairs %}
                                <div class="tab-pane fade {{'  show active' if loop.index == 1 else '' }}" id="{{item.name}}-tab-pane-{{loop.index}}" role="tabpanel" aria-labelledby="{{item.name}}-pair-tab-{{loop.index}}" tabindex="{{loop.index}}">
                                    <div class="row"  style="justify-content: center">
                                        <div class=" col-sm-12 col-md-12 col-lg-8 col-xl-6">
                                            <img src="{{pair.image}}" style="width: 100%; margin: 0 auto;"/>
                                            <div style="text-align: center">
                                                <span>Location: {{pair.start}} - {{pair.end}}</span>
                                            </div>
                                        </div>
                                    </div>

<!--                                    <table id="error_" class="table ">-->
<!--                                        <tbody>-->
<!--                                        <tr>-->
<!--                                            <td><img src="{{pair.image}}" style="width: 50%; margin: 0 auto;"/></td>-->
<!--                                        </tr>-->
<!--                                        <tr>-->
<!--                                            <td class="text-center">Location: {{pair.start}}-{{pair.end}}</td>-->
<!--                                        </tr>-->
<!--                                        </tbody>-->
<!--                                    </table>-->
                                </div>
                                {% endfor%}
                            </div>
                            <div class="nav nav-pills justify-content-center" id="nav-tab" role="tablist">
                                {% for pair in item.pairs %}
                                <button class="nav-link {{ ' active' if loop.index == 1 else '' }}" id="{{item.name}}-pair-tab-{{loop.index}}" data-bs-toggle="pill" data-bs-target="#{{item.name}}-tab-pane-{{loop.index}}" type="button" role="tab"
                                        aria-controls="{{item.name}}-tab-pane-{{loop.index}}" aria-selected="{{ 'true' if loop.index == 1 else 'false' }}">{{loop.index}}
                                </button>
                                {% endfor%}
                            </div>
                        </div>
                    </div>
                    {% endfor%}
                </div>
            </div>


            <div id="additional-info" class="section additional-info">
                <div class="section-title text-primary-emphasis bg-primary-subtle  rounded-1">
                    <h3>Additional information</h3>
                </div>
                <div class="section-content">
                    {% for item in additional %}
                    <div class="sub-section">
                        <table class="table table-light table-striped table-hover caption-top">
                            <p class="lead h5 text-primary">{{item.name}}</p>
                            <thead class="table-primary">
                            <tr>
                                {% for h in item.table_header %}
                                <td>{{h}}</td>
                                {% endfor%}
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in item.table_data %}
                            <tr>
                                {% for col in row %}
                                <td>{{col}}</td>
                                {% endfor%}
                            </tr>
                            {% endfor%}
                            </tbody>
                        </table>
                    </div>

                    {% endfor%}
                </div>
            </div>

            <div class="section chromosome">

                <div class="row"  style="justify-content: center">
                    <div class=" col-sm-12 col-md-12 col-lg-8 col-xl-6">
                         <img src="{{chromosome_image}}"/>
                    </div>
                </div>
            </div>

            <div style="height: 30px"></div>

        </div>
    </div>


</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>

</html>


